﻿<template>
    <div class="table">
        <div>
            <Row>
            <!--搜索框-->
                <Col v-show="userinfo.AreaCode=='530000000000'">
                    <label class="searchLabel">所属地区:</label>
                    <!-- <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange'  class="searchInput"></Cascader>-->
                    <Select v-model="searchModel.AreaCode"  placeholder="请选择..."  @on-change="getStatsData()" class="searchInput">
                        <Option :value="userinfo.AreaCode" v-if="userinfo.AreaCode=='530000000000'">全&nbsp;&nbsp;省</Option>
                        <Option :value="userinfo.AreaCode" v-else>全市/州</Option>
                        <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                    </Select>
                </Col>
                <Col v-show="searchModel.AreaCode=='530000000000'">
                    <label class="searchLabel">是否包含县（市、区）:</label>
                    <!-- <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange'  class="searchInput"></Cascader>-->
                    <Select v-model="searchModel.IsCity"  @on-change="getStatsData()" class="searchInput">
                         <Option value="1">是</Option>
                        <Option value="2">否</Option>
                    </Select>
                </Col>
                <Col>
                    <label class="searchLabel">是否包含明细:</label>
                    <!-- <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange'  class="searchInput"></Cascader>-->
                    <Select v-model="searchModel.IsDetails"  @on-change="getStatsData()" class="searchInput">
                        <Option value="1">是</Option>
                        <Option value="2">否</Option>
                    </Select>
                </Col>
                <Col>
                    <label class="searchLabel">填报年度:</label>
                    <Select v-model="searchModel.FillInYear" placeholder="请选择..." :label-in-value="true" @on-change="getStatsData" clearable class="searchInput">
                        <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                </Col>
                <!-- <Col>
                    <label class="searchLabel">桑园用途:</label>
                    <Select v-model="Option"  placeholder="请选择..." :label-in-value="true" clearable class="searchInput" width="200" @on-change="GetData">
                        <Option :value="item.value" v-for="item in Options" :key="item.value">{{item.name}}</Option>
                    </Select>
                </Col> -->
                <Col >
                    <Button type="primary" @click="DataExport()"  class="searchRight" icon="log-out" >数据导出</Button>
                    <RadioGroup v-model="CheckButton" @on-change="changeButton" type="button" class="searchRight" >
                        <Radio label="listShow" title="列表"><Icon type="ios-paper" size="30"></Icon></Radio>
                        <Radio label="pieShow" title="饼图"><Icon type="ios-pie" size="30"></Icon></Radio>   
                        <Radio label="mapShow" title="地图"><Icon type="android-map" size="30"></Icon></Radio>                                                                               
                    </RadioGroup>    
                </Col>
            </Row>
        </div>
        <Row>
            <div style="text-align: center;font-size: 22px;">({{userinfo.AreaCode|omgAreaName}})表6&nbsp;&nbsp;&nbsp;桑园套种农作物情况调查表
                    <span style="color:red;font-size:16px;margin-top: 20px;" class="searchRight">单位：亩、万元</span>
            </div>
        </Row>
        <Row  v-show="listShow">
            <!-- 列表-->
            <Col>
                <table class="ContentTable">
                    <thead>
                        <tr>
                            <th style="width:72px;">年份</th>
                            <th style="width:72px;">县（市、区）</th>
                            <th>套种作物名称</th>
                            <th>面积（亩）</th>
                            <th>产值（万元）</th>
                            <th>备注</th>
                        </tr>
                        <tr v-if="datas.length>0">
                            <td style="width:72px;">{{datas[0].FillInYearName}}</td>
                            <td style="width:72px;">{{datas[0].AreaName}}</td>
                            <td>{{datas[0].SortName}}</td>
                            <td>{{datas[0].Area}}</td>
                            <td>{{datas[0].OutputValue}}</td>
                            <td>{{datas[0].Remark}}</td>
                        </tr>
                    </thead>
                    <tbody v-if="datas.length>0">
                        <tr v-for="(item,index) in datas"  v-show="index!==0" :key="item.year" :class="{ red:AutoCity(item.SortCode)}">
                            <td style="width:72px;">{{item.FillInYearName}}</td>
                            <td style="width:72px;">{{item.AreaName}}</td>
                            <td>{{item.SortName}}</td>
                            <td>{{item.Area}}</td>
                            <td>{{item.OutputValue}}</td>
                            <td>{{item.Remark}}</td>
                        </tr>
                    </tbody>
                </table>
            </Col>
         </Row>
         <Row v-show="pieShow">
            <!--饼图-->
            <div  id="divPie" style="width:1200px;height:670px;">饼图</div>
        </Row>
        <Row  v-show="mapShow">
            <!--地图展示-->
            <div id="divMap"  style="width:1200px;height:670px;">地图</div>
        </Row>
    </div>
</template>
<script>
import echarts from "echarts";
import yunnan from "echarts/map/js/province/yunnan.js";
// import kunming from "echarts/map/js/city/kunming.js";
export default {
  data() {
    return {
      self: this,
      CreateYearList: this.GetGroupDict("ReportYear"), //年度
      CurrentYear: this.GetCurrentYear(), //当前年度
      AreaList: [],
      TotalData: [],
      Option: "1",
      CurrentAreaName: "",
      userinfo: this.GetlocaStorage("CSuserinfo"), //获取当前用户信息
      CheckButton: "listShow",
      pieLegendData: [], //饼图选择项
      datas: [], //列表数据
      newDatas: [], //去除合计的数据集合
      pieData: [],
      geoCoordMapData: [], //当前市(州)、县(区)坐标信息
      StatsData: [], //地区-汇总数据
      SelectName: "",
      Options: [
        { name: "现有桑园", value: "1" },
        { name: "投产桑园", value: "2" },
        { name: "新栽桑", value: "3" },
        { name: "高产桑园", value: "4" },
        { name: "中产桑园", value: "5" },
        { name: "低产桑园", value: "6" },
        { name: "不用于养蚕的桑园", value: "7" },
        { name: "挖毁桑园", value: "8" }
      ],
      //查询模型：根据需求删除不不要查询条件
      //蔬菜生产情况表代码
      searchModel: {
        Id: "",
        ReportCode: "MulAnnualProducStatist",
        FillInYear: "",
        TimesType: "",
        IsCity: "1",
        IsDetails: "1",
        AreaCode: this.GetlocaStorage("CSuserinfo").AreaCode,
        PageNumber: 1,
        PageSize: 20,
        Status: "4",
        Opinion: ""
      },
      clientHeight: window.innerHeight - 240, //表格默认高度
      listShow: false, //列表显示控制器
      pieShow: false, //饼图显示控制器
      mapShow: false, //地图显示控制器
      total: 100
    };
  },
  //高度计算
  mounted() {
    //table高度计算方法
    const that = this;
    window.onresize = () => {
      return (() => {
        that.clientHeight = window.innerHeight - 240;
      })();
    };
    // this.getStatsData();
    this.changeButton("listShow");
    //  this.showMap();
  },
  //方法
  methods: {
    //获取当前地区包含区(县)市(州)
    SearchAreaList() {
      var areaCode = this.userinfo.AreaCode;
      var areaList = [];
      if (areaCode != "530000000000" && areaCode != null) {
        var item = this.GetlocaStorage("areatreelist")[0];
        for (var i = 0; i < item.children.length; i++) {
          if (item.children[i].value == areaCode) {
            areaList.push(item.children[i]);
          }
        }
      } else {
        areaList = this.GetlocaStorage("areatreelist");
      }
      this.AreaList = areaList[0].children;
    },
    //展示切换
    changeButton: function(n) {
      if (n == "listShow") {
        this.listShow = true; //显示列表
        this.pieShow = false;
        this.mapShow = false;
      } else if (n == "pieShow") {
        this.listShow = false;
        this.pieShow = true; //显示饼图
        this.mapShow = false;
      } else if (n == "mapShow") {
        this.listShow = false;
        this.pieShow = false; //显示地图
        this.mapShow = true;
      } else {
        this.listShow = true; //默认显示列表
        this.pieShow = false;
        this.mapShow = false;
      }
    },
    //显示地图
    showMap() {
      var myChart = echarts.init(document.getElementById("divMap"));
      var geoCoordMap = this.geoCoordMapData; //获取当前区县地图坐标点数据
      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      var option = {
        title: {
          text:
            this.CurrentAreaName +
            this.searchModel.FillInYear +
            this.SelectName +
            "面积分布图",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a}{b}: <br/> {c}:{a}"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: ["1"]
        },
        //数值条
        dataRange: {
          min: 0,
          max: 10,
          calculable: true,
          left: "center",
          color: ["maroon", "purple", "red", "orange", "yellow", "lightgreen"],
          calculable: true,
          itemHeight: 600,
          orient: "horizontal"

          // realtime: true,
        },
        //工具箱
        toolbox: {
          show: true,
          // orient: 'vertical',
          x: "right",
          y: "top",
          showTitle: true,
          feature: {
            restore: { show: true, color: "#FF000" },
            saveAsImage: { show: true, color: "green" },
            mark: { show: true }
            // dataView : {show: true, readOnly: false},
          },
          right: 30,
          itemSize: 20
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: [this.SelectName]
        },
        series: [
          //地图默认配置项
          {
            name: this.SelectName,
            type: "map",
            roam: true, //是否开启鼠标缩放和平移漫游
            mapType:
              this.CurrentAreaName == "云南省" ? "云南" : this.CurrentAreaName,
            coordinateSystem: "geo",
            // symbolSize: function (val) {
            //     return val[2] / 10;
            // },
            boxWidth: 100,
            scaleLimit: { min: 0.8, max: 1.1 },
            tooltip: {
              trigger: "item",
              formatter: "{b}<br/>{a}: {c} 亩"
            },
            itemStyle: {
              normal: { label: { show: true } },
              emphasis: { label: { show: true } }
            },
            data: this.StatsData
          }
        ]
      };
      myChart.setOption(option);
    },
    //显示饼图
    showPie() {
      var myChart = echarts.init(document.getElementById("divPie"));
      var option = {
        title: {
          text:
            this.CurrentAreaName +
            this.searchModel.FillInYear +
            this.SelectName +
            "面积占比图",
          left: "center"
        },
        toolbox: {
          show: true,
          feature: {
            restore: { show: true },
            saveAsImage: { show: true },
            mark: { show: true },
            magicType: { show: true }
          },
          right: 30,
          itemSize: 20
        },
        scaleLimit: { min: 100, max: 20000 },
        tooltip: {
          trigger: "axis",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          // orient: 'vertical',//是否垂直显示
          type: "scroll",
          show: true,
          bottom: 10,
          left: "center",
          backgroundColor: "#F8F3F3",
          radius: ["55%", "60%"],
          avoidLabelOverlap: false,
          selectedMode: "multiple",
          hoverAnimation: true,
          data: this.pieLegendData
        },
        itemStyle: {
          normal: {
            // color: '#c23531',
            shadowBlur: 20,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        series: [
          {
            name: this.SelectName,
            type: "pie",
            radius: ["20%", "60%"],
            // center: ['50%', '50%'],
            animation: true,
            selectedMode: "multiple",
            hoverAnimation: true,
            selectedOffset: 40,
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            },
            label: {
              emphasis: {
                formatter: "{b}：{c}亩({d}%)",
                show: true
              },
              normal: {
                formatter: "{b}：{c}亩({d}%)",
                show: true
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: this.StatsData
          }
        ]
      };
      myChart.setOption(option);
    },
    //获取地区统计数据
    getStatsData(obj) {
      var self = this;
      var user = self.GetlocaStorage("CSuserinfo");
      if (self.searchModel.AreaCode != "530000000000") {
        self.searchModel.IsCity = "1";
      }
      if (self.searchModel.IsCity != "1") {
        self.searchModel.IsDetails = "2";
      }
      if (
        self.searchModel.FillInYear != null &&
        self.searchModel.FillInYear != ""
      ) {
        self.searchModel.FillInYear = self.searchModel.FillInYear; //获取当前系统年份
      } else {
        self.searchModel.FillInYear = self.CurrentYear + "年"; //获取填报年度-----数据字典值
      }
      self.$http
        .post("MulInterCrops/PostNewStatsList", self.searchModel)
        .then(function(res) {
          if (res.data.status === 1) {
            if (res.data.model != null) {
              if (res.data.model.length != 0) {
                self.datas = res.data.model; //列表赋值
                self.CurrentAreaName = res.data.model[0].AreaName; //当前州(市)或者省
              }else{
                self.datas = [];
              }
            }
            // self.showMap(); //刷新地图数据
            // self.showPie(); //刷新饼图数据
          } else {
            self.$Modal.error({
              title: "提示信息",
              content: res.data.message
            });
          }
        });
    },
    AutoCity(code) {
      var result = false;
      if (this.searchModel.IsDetails == "1") {
        if (code == "heji") {
          result = true;
        }
      }
      return result;
    },
    DataExport() {
      //导出
      var self = this;
      var user = self.GetlocaStorage("CSuserinfo");
      if (
        self.searchModel.FillInYear != null &&
        self.searchModel.FillInYear != ""
      ) {
        self.searchModel.FillInYear = self.searchModel.FillInYear; //获取当前系统年份
      } else {
        self.searchModel.FillInYear = self.CurrentYear + "年"; //获取填报年度-----数据字典值
      }
      window.open(
        this.$http.defaults.baseURL +
          "MulInterCrops/GetStatsExcelData?FillInYear=" +
          self.searchModel.FillInYear +
          "&&AreaCode=" +
          self.searchModel.AreaCode +
          "&&Status=" +
          self.searchModel.Status
      );

      // self.$http.post('MulAreaStatist/PostStatsExcelData', self.searchModel).then(function (res) {
      //     if (res.data.status === 1) {
      //         self.showMap();//刷新地图数据
      //         self.showPie();//刷新饼图数据
      //     }
      //     else {
      //         self.$Modal.error({
      //         title: '提示信息',
      //         content: res.data.message
      //         });
      //     }
      // });
    },
    GetData(obj) {
      this.getStatsData(obj);
    }
  },
  //创建Vue页面方法
  created: function() {
    this.SearchAreaList(); //获取地区统计数据
    this.getStatsData({ label: "现有桑园", value: "1" }); //获取地区统计数据
  },
  watch: {
    //需要监听的在此处新增监听对象
  }
};
</script>
<style scoped src="../../styles/stats.css"></style>
